<template>
  <div class="flex flex-col justify-center items-center">
    <my-swiper class="w-full"/>
    <!-- slow duration -->
    <marquee-text :reverse="true" class="w-full bg-primary/50 my-1 select-none">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
    </marquee-text>
    <div class="w-full px-5 pb-6">
      <div class="alert h-10 bg-gradient-to-r from-primary/30 to-primary/10 mb-1 flex flex-row ">
        <span class="text-black font-extralight">新上线</span>
        <div class="animate-pulse -ml-3 -mt-3 flex justify-start items-center left-20 text-primary text-xs">new</div>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-4 justify-center items-center gap-2 w-full">


        <router-link v-for="(song,index) in songs" :key="index"
             :to="'/songInfo/'+song?.['id']"
             class="relative select-none flex flex-col justify-center items-center rounded-2xl shadow-2xl image-full z-10 p-6">
          <img class="p-6 object-cover" :src="imgs[index]" alt="Shoes"/>
          <motion
              :initial="{
                opacity:0,
              }"
              :hover="{
                opacity:100,
              }"
              class="flex flex-col justify-center items-center absolute top-0 w-full h-full rounded-2xl bg-black/70 text-white p-2">
            <h2 class="card-title">{{ song?.['name'] }}</h2>
            <p class="truncate w-full">{{ song?.['remark'] }}</p>
          </motion>
          <h2 id="cover_title" class="md:hidden">{{ song?.['name'] +'-'+ song?.['singer'] }}</h2>
        </router-link>


      </div>
    </div>

    <div class="flex-col flex justify-center items-center">

    </div>
  </div>
</template>

<script setup lang="ts">
import MySwiper from "../components/MySwiper.vue";
import {Motion} from "@motionone/vue";
import MarqueeText from 'vue-marquee-text-component'
import {onMounted, ref} from "vue";
import {hook_getNewSongFromEs} from "../hook/SongHook.ts";

//导入图片
import image_1 from '../assets/vectors/music/music (1).png'
import image_2 from '../assets/vectors/music/music (2).png'
import image_3 from '../assets/vectors/music/music (3).png'
import image_4 from '../assets/vectors/music/music (4).png'
import image_5 from '../assets/vectors/music/music (5).png'
import image_6 from '../assets/vectors/music/music (6).png'
import image_7 from '../assets/vectors/music/music (7).png'
import image_8 from '../assets/vectors/music/music (8).png'
import image_9 from '../assets/vectors/music/music (9).png'


let imgs = ref([
  image_1,
  image_2,
  image_3,
  image_4,
  image_5,
  image_6,
  image_7,
  image_8,
  image_9,
])

let songs = ref();


onMounted(async () => {
  let data = await hook_getNewSongFromEs(9);
  console.log(data?.['content'])
  songs.value = data?.['content']
})


</script>

<style scoped>
</style>
